<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File(s) size</title>
<script>

var oFReader = new FileReader();

oFReader.onload = function (oFREvent) {

  var preview = document.createElement("img");
  preview.src = oFREvent.target.result;
  document.getElementById("preview").appendChild(preview);  

};

function updateSize() {
  var nBytes = 0,
      oFiles = document.getElementById("uploadInput").files,
      nFiles = oFiles.length;
  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
     nBytes += oFiles[nFileId].size;
    // oFReader.readAsDataURL(oFiles[nFileId]);
  }
  var sOutput = nBytes + " bytes";
  var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], 
      nMultiple = 0, nApprox = nBytes / 1024;

  // optional code for multiples approximation
  for ( ; nApprox > 1; nApprox /= 1024, nMultiple++) {
    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
  }
  // end of optional code
  document.getElementById("fileNum").innerHTML = nFiles;
  document.getElementById("fileSize").innerHTML = sOutput;

 

}



   function sendFile(file) {
            
            var uri =  "{:U('upload')}";

            var xhr = new XMLHttpRequest();
            var fd = new FormData();
            
            xhr.open("POST", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // Handle response.
                    //alert(xhr.responseText); // handle response.
                    //console.log(xhr.responseText);
                }
            };
            fd.append('file', file);
            // Initiate a multipart/form-data upload
            xhr.send(fd);
        }


  function uploadfilesfun(){

    var filesobj = document.getElementById('uploadInput');
    //console.log(filesobj);
    
    for(var i=0;i<document.getElementById("uploadInput").files.length;i++){
          file=document.getElementById("uploadInput").files[i]; 
          console.log(file);

          sendFile(file);  
    }

  }


</script>
</head>

<body onload="updateSize();">
<form name="uploadForm">
<p>
  <input id="uploadInput" type="file"   onchange="updateSize();" multiple>
    selected files： 
    <span id="fileNum">0</span>; total size： 
    <span id="fileSize">0</span>
    <div id="preview">

    </div>
    <img id="uploadPreview" style="width: 100px; height: 100px;" src="" alt="Image preview" />
</p>
<p>
  <input type="submit" onclick="uploadfilesfun()" value="Send file">
</p>
</form>
</body>
</html>